<template>
  <div class="excelBody">
    <el-alert
      v-if="showInfo"
      :title="`有${erro_num}条数据错误，共${excelList.length+teachingList.length}条数据，物料申请${excelList.length}条，教具申请${teachingList.length}条.`"
      type="warning"
      show-icon>
    </el-alert>
    <div class="excelBody-upload" v-if="!showExcel">
      <el-upload
        class="upload-demo"
        drag
        :on-change="handleBeforeUpload"
        action=""
        :auto-upload="false"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <div class="excelBody-table" v-else>
      <div class="excelBody-table-tobody">
        <div class="excelBody-table-tobodyTh">
          <div class="excelBody-table-tobodyTh-th numberLine">
            序号
          </div>
          <div class="excelBody-table-tobodyTh-th numberLine">
            类型
          </div>
          <div class="excelBody-table-tobodyTh-th dis-fl">
            名称
          </div>
          <div class="excelBody-table-tobodyTh-th nationline">
            单位
          </div>
          <div class="excelBody-table-tobodyTh-th nationline">
            需要数量
          </div>
          <div class="excelBody-table-tobodyTh-th nationline">
            金额
          </div>
          <div class="excelBody-table-tobodyTh-th timeline">
            期望时间
          </div>
          <div class="excelBody-table-tobodyTh-th picline">
            图片
          </div>
          <div class="excelBody-table-tobodyTh-th dis-fl">
            采购链接
          </div>
          <div class="excelBody-table-tobodyTh-th dis-fl">
            补充说明
          </div>
          <div class="excelBody-table-tobodyTh-th dis-fl">
            申购事由
          </div>
          <div class="excelBody-table-tobodyTh-th cateLine">
            教具分类
          </div>
          <div class="excelBody-table-tobodyTh-th closeLine" style="color: #000">
            操作
          </div>
        </div>
        <div class="excelBody-table-tobodyTd">
          <!--          物料申请-->
          <div class="excelBody-table-tobodyTh-tdList" v-for="(item,index) in excelList" :key="index"
               :class="{'errInputList': item.list_erro}">
            <div class="excelBody-table-tobodyTh-td numberLine">
              {{ index + 1 }}
            </div>
            <div class="excelBody-table-tobodyTh-td numberLine">
              物料
            </div>
            <div class="excelBody-table-tobodyTh-td dis-fl" :class="{'errInput':item.name_erro}">
              <el-input v-model="item.name" placeholder="名称" size="mini" @input="changeName(index, 'name')"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td nationline" :class="{'errInput':item.card_erro}">
              <el-input v-model="item.unit" placeholder="单位" size="mini" @input="changeName(index, 'unit')"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td nationline" :class="{'errInput':item.sex_erro}">
              <el-input v-model="item.need_number" placeholder="需要数量" size="mini"
                        @input="changeName(index, 'need_number')"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td nationline">
              <el-input v-model="item.price" placeholder="金额" size="mini"
                        @input="changeName(index, 'price')"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td timeline">
              <el-input v-model="item.expect_time" placeholder="期望时间" size="mini"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td picline" @click="uploadImg(0, index)">
              <el-image
                style="width: 30px; height: 30px"
                :src="item.pic"
                fit="cover">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div class="excelBody-table-tobodyTh-td dis-fl">
              <el-input v-model="item.url" placeholder="采购链接" size="mini"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td dis-fl">
              <el-input v-model="item.remark" placeholder="补充说明" size="mini"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td dis-fl">
              <el-input v-model="item.reason" placeholder="申购事由" size="mini"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td cateLine">

            </div>
            <div class="excelBody-table-tobodyTh-td closeLine">
              <i class="el-icon-error" @click="deleteFn(index,1)"></i>
            </div>
          </div>
          <!--          教具申请-->
          <div class="excelBody-table-tobodyTh-tdList" v-for="(item,index) in teachingList" :key="'teaching'+index"
               :class="{'errInputList': item.list_erro}">
            <div class="excelBody-table-tobodyTh-td numberLine">
              {{ excelList.length + (index + 1) }}
            </div>
            <div class="excelBody-table-tobodyTh-td numberLine">
              教具
            </div>
            <div class="excelBody-table-tobodyTh-td dis-fl" :class="{'errInput':item.name_erro}">
              <el-input v-model="item.name" placeholder="名称" size="mini"
                        @input="changeName(index, 'name', 'teach')"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td nationline" :class="{'errInput':item.unit_erro}">
              <!--              <el-input v-model="item.unit" placeholder="单位" size="mini"-->
              <!--                        @input="changeName(index, 'unit', 'teach')"></el-input>-->
            </div>
            <div class="excelBody-table-tobodyTh-td nationline" :class="{'errInput':item.need_number_erro}">
              <el-input v-model="item.need_number" placeholder="数量" size="mini"
                        @input="changeName(index, 'need_number', 'teach')"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td nationline" :class="{'errInput':item.price_erro}">
              <el-input v-model="item.price" placeholder="金额" size="mini"
                        @input="changeName(index, 'price', 'teach')"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td timeline">
              <el-input v-model="item.expect_time" placeholder="期望时间" size="mini"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td picline" @click="uploadImg(1, index)">
              <el-image
                style="width: 30px; height: 30px"
                :src="item.pic"
                fit="cover">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div class="excelBody-table-tobodyTh-td dis-fl">
              <el-input v-model="item.url" placeholder="采购链接" size="mini"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td dis-fl">
              <el-input v-model="item.remark" placeholder="补充说明" size="mini"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td dis-fl">
              <el-input v-model="item.reason" placeholder="申购事由" size="mini"></el-input>
            </div>
            <div class="excelBody-table-tobodyTh-td cateLine" :class="{'errInput':item.cate_erro}">
              <el-select v-model="item.cate_id" placeholder="请选择" size="mini" style="width: 100px;"
                         @change="selectFn(index, 1)">
                <el-option
                  v-for="item in cateList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-select v-model="item.cate_son_id" placeholder="请选择" size="mini" style="width: 100px;"
                         v-if="cateCheck_select[item.cate_id]&&cateCheck_select[item.cate_id].children"
                         @change="selectFn(index, 2)">
                <el-option
                  v-for="item in cateCheck_select[item.cate_id].children"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="excelBody-table-tobodyTh-td closeLine">
              <i class="el-icon-error" @click="deleteFn(index,2)"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
var XLSX = require('xlsx')
// import {readFile} from './excelRreadFile.js'; //读取excel文件方法

export default {
  data() {
    return {
      allowed: [
        'xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'xls', "application/vnd.ms-excel",
        'csv', "text/csv"],
      loading: false,
      excelList: [], // 物料申请
      teachingList: [], // 教具申请
      erro_num: 0,
      showExcel: false,
      showInfo: false,
      cateList: [],
      cateCheck: {},
      cateCheck_select: {},
      url: '',
      dataBinary: null
    }
  },
  created() {

  },
  methods: {
    testFn(dataOption) {
      let that = this
      let data_ = JSON.parse(JSON.stringify(dataOption[0].sheet))
      console.log('data_:', data_)
      let list_ = [] // 物料列表
      let teaching_ = [] // 教具列表
      let erro_num = 0

      for (let index in data_) {
        let item = data_[index]
        let newList = {
          name: item['名称'] ? item['名称'] : '', // 名称
          unit: item['单位'] ? item['单位'] : '', // 单位
          need_number: item['需要数量'] ? item['需要数量'] : '', // 需要数量
          price: item['金额'] ? item['金额'] : '', //金额
          expect_time: item['期望时间'] ? item['期望时间'] : '',  // 期望时间
          url: item['采购链接'] ? item['采购链接'] : '', // 采购链接
          remark: item['补充说明'] ? item['补充说明'] : '', // 补充说明
          reason: item['申购事由'] ? item['申购事由'] : '', // 申购事由
          cate_id: '', // 教具分类
          cate_son_id: '',
          pic: ''
        }
        //身份证截取生日
        let status_num = false
        if (!item['名称']) {
          newList.name_erro = true // 单个错误
          newList.list_erro = true // 一行错误
          status_num = true
        }

        if (!item['需要数量']) {
          newList.need_number_erro = true
          newList.list_erro = true
          status_num = true
        }
// 此处需要判断格式是否正确
        if (item['金额'] && !this.checkPriceFn(item['金额'])) {
          newList.price_erro = true
          newList.list_erro = true
          status_num = true
        }

        if (item['教具分类']) {
          // type // 采购类型0物料1教具
          // 验证是否存在类目
          newList.type = 1
          let status_ = false
          let cate_list = JSON.parse(JSON.stringify(this.cateCheck))
          if (cate_list[item['教具分类']]) {
            status_ = true
            newList.cate_id = cate_list[item['教具分类']].id
          } else {
            for (let index in cate_list) {
              if (cate_list[index].children && cate_list[index].children[item['教具分类']]) {
                status_ = true
                newList.cate_id = cate_list[index].id
                newList.cate_son_id = cate_list[index].children[item['教具分类']].id
              }
            }
          }
          if (!status_) {
            console.log('不存在该类目：', item['教具分类'])
            newList.cate_erro = true
            newList.list_erro = true
            status_num = true
          }
          teaching_.push(newList)
        } else {
          if (!item['单位']) {
            newList.unit_erro = true
            newList.list_erro = true
            status_num = true
          }
          newList.type = 0
          list_.push(newList)
        }
        if (status_num) {
          erro_num = erro_num + 1
        }
      }

      let word_price = []
      let word_number = []
      if (list_.length) {
        for (let index in list_) {
          let item = list_[index]
          if (!this.checkNeedNumberFn(item.need_number)) {
            word_number.push(`【${Number(index) + 1}·${item.name}】`)
          }
          // 判断数量，金额是否是数字类型
          if (item.price && !this.checkPriceFn(item.price)) {
            word_price.push(`【${Number(index) + 1}·${item.name}】`)
          }
        }
      }
      if (teaching_.length) {
        for (let index in teaching_) {
          let item = teaching_[index]
          if (!this.checkNeedNumberFn(item.need_number)) {
            word_number.push(`【${list_.length + Number(index) + 1}·${item.name}】`)
          }
          // 判断数量，金额是否是数字类型
          if (item.price && !this.checkPriceFn(item.price)) {
            word_price.push(`【${list_.length + Number(index) + 1}·${item.name}】`)
          }
        }
      }

      if (word_price.length || word_number.length) {
        let html_ = ''
        if (word_price.length) {
          html_ = html_ + `<strong>${word_price.join('')}</strong>,<span style="color:red">价格格式错误！</span>`
        }
        if (word_number.length) {
          html_ = html_ + `<strong >${word_number.join('')}</strong>,<span style="color:red">数量格式错误！</span>`
        }
        this.$alert(html_, '错误提示', {
          dangerouslyUseHTMLString: true
        });
      }

      this.erro_num = erro_num
      this.excelList = list_ // 物料申请
      this.teachingList = teaching_ // 教具申请
      this.showInfo = true
      this.showExcel = true
      this.totalPriceFn()
      this.$emit('changeData', {
        type: 'downloadStatus', // 最后的参数内容
        data: {material: list_, teach: teaching_}
      })
    },
    async handleBeforeUpload(file) {
      //选择文件后
      let _this = this
      _this.showLoading(true)
      //检测文件类型
      if (!_this.checkFileType(file)) {
        _this.showLoading(false)
        return false
      }
      //选择excel文件后，并读取其内容（文件流）
      let dataBinary = await this.analysis(file)
      this.dataBinary = dataBinary
      if (dataBinary != null) {
        this.testFn(dataBinary)
      }
    },
    //解析excel
    analysis(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        reader.onload = function (e) {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary"
          });
          const result = [];
          this.wb.SheetNames.forEach(sheetName => {
            console.log(sheetName)
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            });
          });
          resolve(result);
        };
        reader.readAsBinaryString(file.raw);
        // reader.readAsBinaryString(file) // 传统input方法
      });
    },
    showLoading(val) {
      let _this = this
      _this.loading = val
    },
    changeName(index, name, type) {
      // excelList: [] 物料申请; teachingList: [], // 教具申请
      let data_ = type === 'teach' ? JSON.parse(JSON.stringify(this.teachingList[index])) : JSON.parse(JSON.stringify(this.excelList[index]))
      if (!data_[name]) {
        if (name !== 'price') {
          data_[name + '_erro'] = true
          data_['list_erro'] = true
        }
      } else {
        data_[name + '_erro'] = false
        if (type !== 'teach' && !data_.name_erro && !data_.unit_erro && !data_.need_number_erro && !data_.price_erro) {
          data_['list_erro'] = false
        }
        if (type === 'teach' && !data_.name_erro && !data_.unit_erro && !data_.need_number_erro && !data_.price_erro && !data_.cate_erro) {
          data_['list_erro'] = false
        }
        if (name === 'price') {
          if (!this.checkPriceFn(data_.price)) {
            this.$message.error('金额格式错误，必须数字类型')
            return
          }
        }
        if (name === 'need_number') {
          if (!this.checkNeedNumberFn(data_.price)) {
            this.$message.error('数量格式错误，必须数字类型')
            return
          }
        }
      }

      this.$set(type === 'teach' ? this.teachingList : this.excelList, index, data_)
      if (name === 'price' || name === 'need_number') {
        this.totalPriceFn()
      }
      let num_ = 0
      for (let item of this.teachingList) {
        if (item.list_erro) {
          num_ = num_ + 1
        }
      }
      for (let item of this.excelList) {
        if (item.list_erro) {
          num_ = num_ + 1
        }
      }
      this.erro_num = num_
    },
    // 金额验证
    checkPriceFn(option) {
      if (option) {
        let price_ = Number(option)
        if (isNaN(price_)) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    },
    // 数量判断
    checkNeedNumberFn(option) {
      if (option) {
        let Number_ = Number(option)
        if (isNaN(Number_)) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }

    },
    // 类目修改
    selectFn(index, type) {
      // type 1 主类目 2 子类目； index 序列号
      let data_ = JSON.parse(JSON.stringify(this.teachingList[index]))
      data_.cate_erro = false
      if (!data_.name_erro && !data_.unit_erro && !data_.need_number_erro && !data_.price_erro && !data_.cate_erro) {
        data_['list_erro'] = false
      }
      this.$set(this.teachingList, index, data_)
      this.checkDataFn(JSON.parse(JSON.stringify(this.excelList)), 1)
      this.checkDataFn(JSON.parse(JSON.stringify(this.teachingList)), 2)
    },
    checkFileType(file) {
      let _this = this
      let flog = false
      //得到上传文件的值
      let fileName = file.name
      //取其类型
      let fileType = fileName.lastIndexOf('.')
      //返回位于String对象中指定位置的子字符串并转换为小写.
      let extension = fileName
        .substring(fileType)
        .toLowerCase()
        .replace('.', '')
      //判断允许上传的文件格式
      if (_this.allowed.includes(extension)) {
        flog = true
      } else {
        flog = false
      }
      return flog
    },
    sendData(option) {
      if (!this.excelList.length && !this.teachingList.length) {
        this.$message.error('请选择需要申请的物料或教具')
        return
      }
      this.erro_num = 0
      let excelList_ = JSON.parse(JSON.stringify(this.excelList)) // 物料
      let teachingList_ = JSON.parse(JSON.stringify(this.teachingList)) // 教具
      let status = true
      let status_a = true
      status = this.checkDataFn(excelList_, 1)
      status_a = this.checkDataFn(teachingList_, 2)
      if (status && status_a) {
        this.$emit('changeData', {
          type: option, // 最后的参数内容
          data: {material: excelList_, teach: teachingList_}
        })
      } else {
        this.$message.error('请正确填写必要信息')
      }
    },
    checkDataFn(list_, type) {
      // type 1 物料 2 教具
      let n = this
      let status = true
      let num_ = this.erro_num
      for (let index in list_) {
        let item = list_[index]
        let line_status = false
        // 名称
        if (!item.name) {
          line_status = true
          status = false
          item.name_erro = true
          item.list_erro = true
        } else {
          item.name_erro = false
        }
        // 单位
        if (!item.type) {
          if (!item.unit) {
            line_status = true
            status = false
            item.unit_erro = true
            item.list_erro = true
          } else {
            item.unit_erro = false
          }
        }

        // 需要的数量
        if (!item.need_number) {
          line_status = true
          status = false
          item.need_number_erro = true
          item.list_erro = true
        } else {
          item.need_number_erro = false
        }
        // 金额
        if (item.price && !this.checkPriceFn(item.price)) {
          line_status = true
          status = false
          item.price_erro = true
          item.list_erro = true
        }
        // if (!item.price) {
        //   line_status = true
        //   status = false
        //   item.price_erro = true
        //   this.list_erro = true
        // } else {
        //   item.price_erro = false
        // }
        if (type === 2) {
          if (!item.cate_id) {
            line_status = true
            status = false
            item.cate_erro = true
            item.list_erro = true
          } else {
            if (n.cateCheck_select[item.cate_id].children && !item.cate_son_id) {
              line_status = true
              status = false
              item.cate_erro = true
              item.list_erro = true
            }
            if (!n.cateCheck_select[item.cate_id].children) {
              item.cate_erro = false
            }
          }
        }

        // 判断错误提示
        if (!item.name_erro && !item.need_number_erro && !item.price_erro) {
          if (type === 2 && !item.cate_erro) {
            item.list_erro = false
          }
          if (type === 1 && !item.unit_erro) {
            item.list_erro = false
          }
        }

        if (line_status) {
          num_ = num_ + 1
        }
        n.$set(type === 1 ? n.excelList : n.teachingList, index, item)
      }
      this.erro_num = num_
      return status
    },
    // 计算整体总价
    totalPriceFn() {
      let excelList_ = JSON.parse(JSON.stringify(this.excelList)) // 物料
      let teachingList_ = JSON.parse(JSON.stringify(this.teachingList)) // 教具
      let count = 0
      let number_ = 0
      for (let item of excelList_) {
        if (this.checkPriceFn(item.price) && this.checkNeedNumberFn(item.need_number)) {
          count = count + (Number(item.price) * Number(item.need_number))
          number_ = number_ + Number(item.need_number)
        }
      }
      for (let item of teachingList_) {
        if (this.checkPriceFn(item.price) && this.checkNeedNumberFn(item.need_number)) {
          count = count + (Number(item.price) * Number(item.need_number))
          number_ = number_ + Number(item.need_number)
        }
      }
      this.$emit('changeData', {
        type: 'total', // 最后的参数内容
        data: {count: count, number: number_}
      })
    },
    // 新增数据
    addNewgoods(option) {
      if (!option.type) {
        this.excelList.push(option)
      } else {
        this.teachingList.push(option)
      }
      this.showExcel = true
      this.totalPriceFn()
      this.$emit('changeData', {
        type: 'downloadStatus', // 最后的参数内容
        data: {material: this.excelList, teach: this.teachingList}
      })
    },
    deleteFn(index, type) {
      if (type === 1) {
        this.excelList.splice(index, 1)
      } else {
        this.teachingList.splice(index, 1)
      }
      if (!this.excelList.length && !this.teachingList.length) {
        this.showExcel = false
      }
      let num_ = 0
      for (let item of this.teachingList) {
        if (item.list_erro) {
          num_ = num_ + 1
        }
      }
      for (let item of this.excelList) {
        if (item.list_erro) {
          num_ = num_ + 1
        }
      }
      this.erro_num = num_
      this.totalPriceFn()
      this.$emit('changeData', {
        type: 'downloadStatus', // 最后的参数内容
        data: {material: this.excelList, teach: this.teachingList}
      })
    },
    // 上传图片内容
    uploadImg(type, index) {
      this.$emit('changeData', {
        data: {type: type, index: index},
        type: 'picUpload' // 加载完给我类目数据
      })
    },
    setCateFn() {
      // 整理分类
      for (let item of this.cateList) {
        let b = JSON.parse(JSON.stringify(item))
        let c = JSON.parse(JSON.stringify(item))
        let a = {}
        let d = {}
        if (item.children) {
          for (let children_ of item.children) {
            a[children_.name] = children_
            d[children_.id] = children_
          }
          b.children = a
          c.children = d
        }
        this.cateCheck[item.name] = b
        this.cateCheck_select[item.id] = c
      }
    },
    picSetFn(item) {
      console.log('图片', item)
      let option_ = !item.type ? JSON.parse(JSON.stringify(this.excelList[item.index])) : JSON.parse(JSON.stringify(this.teachingList[item.index]))
      option_.pic = item.pic
      this.$set(!item.type ? this.excelList : this.teachingList, item.index, option_)
    },
    checkCate(data) {
      console.log('data:', data)
      if (data) {
        this.cateList = JSON.parse(JSON.stringify(data))
      }
      console.log('data:', data)
      this.setCateFn()
    },
    clearList() {
      this.showExcel = false
      this.excelList = []
      this.teachingList = []
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.excelBody {
  height: 100%;
  width: 100%;
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
}

.excelBody-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.excelBody-table{
  flex: 1;
  overflow-y: auto;
}
.excelBody-table-tobody {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f4f4f9;
}

.excelBody-table-tobodyTh {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
}

.excelBody-table-tobodyTh-th {
  border-right: 1px solid #f4f4f9;
  background: #d4edff;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  font-weight: bold;
  box-sizing: border-box;
}

.excelBody-table-tobodyTd {
  flex: 1;
  overflow-y: auto;

}

.excelBody-table-tobodyTh-tdList {
  display: flex;
  border-bottom: 1px solid #f4f4f9;
}

.excelBody-table-tobodyTh-td {
  padding: 5px 2px;
  box-sizing: border-box;
}

.sexline {
  width: 60px;
}

.nationline {
  width: 60px;
}

.nameline {
  width: 80px;
}

.twinsline {
  width: 70px;
}

.birth-line {
  width: 90px;
}

.timeline {
  width: 110px;
}

.parentsPhone-line {
  width: 115px;
}

.errInputList {
  background: #FBA4AD3D;
}

.dis-fl {
  flex: 1;
}

.cateLine {
  display: flex;
  align-items: center;
  width: 206px;
  justify-content: center;
}

.numberLine {
  width: 50px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.closeLine {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E65D6E;
  cursor: pointer;
}

.closeLine i:hover {
  text-decoration: underline;
}

.picline {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
